<template>
    <view class="w-[375px] flex flex-col items-center gap-3 mt-3">
       

        <!-- 底部链接区域 -->
        <view class="bg-yellow-50 w-[375px] m-auto flex flex-col py-1">
            <view class="flex justify-between items-center py-1 px-3 hover:bg-yellow-100 transition-colors duration-200 cursor-pointer" @click="goToServiceNotice">
                <text class="text-[12px] text-yellow-800">服务须知</text>
                <text class="text-[12px] text-yellow-800">查看 <Right size="10"></Right></text>
            </view>
            <view class="flex justify-between items-center py-1 px-3 hover:bg-yellow-100 transition-colors duration-200 cursor-pointer" @click="goToInformedConsent">
                <text class="text-[12px] text-yellow-800">知情同意书</text>
                <text class="text-[12px] text-yellow-800">查看 <Right size="10"></Right></text>
            </view>
            <view class="flex justify-between items-center py-1 px-3 hover:bg-yellow-100 transition-colors duration-200 cursor-pointer" @click="goToRiskDisclosure">
                <text class="text-[12px] text-yellow-800">风险告知书</text>
                <text class="text-[12px] text-yellow-800">查看 <Right size="10"></Right></text>
            </view>
            <view class="flex justify-between items-center py-1 px-3 hover:bg-yellow-100 transition-colors duration-200 cursor-pointer" @click="goToChargeDescription">
                <text class="text-[12px] text-yellow-800">收费说明</text>
                <text class="text-[12px] text-yellow-800">查看 <Right size="10"></Right></text>
            </view>
        </view>

        <!-- 须知条款等 -->
        <view class="flex items-center justify-center gap-2 p-2 bg-white mb-8">
            <nut-checkbox v-model="model" @change="handleChange">
                <text class="text-[12px] text-gray-600">支付即表示同意
                    <text class="text-[#41916c]">《服务须知》《知情同意书》《风险告知书》《收费说明》</text>中的全部条款内容</text>
            </nut-checkbox>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Checkbox } from '@nutui/nutui-taro';
import Taro from '@tarojs/taro';
// import checkIcon from '@/assets/ico/check.png'

import { defineModel } from 'vue'

// 定义 model 变量（自动关联 props 和事件）
const model = defineModel<boolean>()

// 跳转函数
const goToServiceNotice = () => {
  Taro.navigateTo({
    url: '/package-other/books/service-notice'
  });
};

const goToInformedConsent = () => {
  Taro.navigateTo({
    url: '/package-other/books/informed-consent'
  });
};

const goToRiskDisclosure = () => {
  Taro.navigateTo({
    url: '/package-other/books/risk-disclosure'
  });
};

const goToChargeDescription = () => {
  Taro.navigateTo({
    url: '/package-other/books/charge-description'
  });
};

const products = ref([1, 2, 3, 4]);
const videos = ref([1, 2, 3]);
const footerLinks = ref([
    { text: '服务须知' },
    { text: '知情同意书' },
    { text: '风险告知书' },
    { text: '收费说明' }
]);

// const checked = ref(false);
const handleChange = (value: boolean) => {
    console.log(value); // true or false
    // checked.value = value;
    model.value = value
};
</script>
